<template>
	<view class="bg">
		<view class="top">
			<view v-for="(item, index) in tabList" :class="['tab',tabSelect==item.value?'active':'']" @click="changeTab(item)">{{item.label}}</view>
		</view>
		<view class="split-line"></view>
		<view class="body">
			<view v-show="showLoading" style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
				<div class="loading" style="z-index: 999;">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
				<view style="font-size: 28upx;color: #777;line-height: 40px;">订单数据加载中</view>
			</view>
			<view v-if="showTimeLine" class="timeBlock">
				<!-- 套餐订单 -->
				<timeline v-show="tabSelect=='package'">
					<timeline-item v-for="(item,index) in packageList" :key="index" :leftTime="item.insertTimeDate" :color="color">
						<view class="package-item" @click="goToOrderDetail(item)">
							<view class="package-item-number">
								<text>{{item.cardNumber}}</text>
								<text style="font-weight: 300;font-size: 24upx;">查看</text>
							</view>
							<view class="package-item-meal">{{item.setMealName}}</view>
							<view class="package-item-status">
								<text>￥{{item.price}}</text>
								<text>{{item.dictStatusName}}</text>
							</view>
							<view class="package-item-remark">订单备注：{{item.remark}}</view>
							<img src="../../../static/img/qian.png" class="img-icon" />
						</view>
						<view style="display: flex; justify-content: space-between; align-items: center;">
							<view style="font-weight: 400; font-size: 24upx; border: 1px solid #3791FF; padding: 3px 12px;color: #3791FF; float: right; display: block;margin-top: 5px;border-radius: 3px;" @click="goToCardDetail(item)">设备详情</view>
							<view style="font-weight: 400; font-size: 24upx; border: 1px solid #3791FF; padding: 3px 12px;color: #3791FF; float: right; display: block;margin-top: 5px;border-radius: 3px;margin-right: -10px;" @click="goToRecharge(item)">再充一单</view>
						</view>
						
					</timeline-item>
				</timeline>
				<!-- 余额订单 -->
				<timeline v-if="tabSelect=='balance'">
					<timeline-item v-for="item in balanceList" :leftTime="item.date" :color="color">
						<view class="package-item">
							<view class="package-item-number">
								<text>{{item.cardNumber}}</text>
							</view>
							<view class="package-item-meal" v-if="item.setMealName">{{item.setMealName}}</view>
							<view class="package-item-number">
								<view style="font-size: 14px;font-weight: 500;">{{item.nickName}}</view>
								<view style="font-weight: 600;font-size: 24upx;z-index: 100;" @click="goToBalanceRecharge(item)">再充一单</view>
							</view>
							<!-- <view class="package-item-meal">{{item.nickName}}</view> -->
							<view class="package-item-status" v-if="item.price>0">
								<text>{{item.dictTransactionMothodName}}充值余额</text>
								<text>￥{{item.price}}</text>
							</view>
							<view class="package-item-status" v-if="item.price<0">
								<text>余额订购套餐</text>
								<text>￥{{item.price}}</text>
							</view>
							<img src="../../../static/img/purse.png" class="img-icon" />
						</view>
					</timeline-item>
				</timeline>
				<!-- 换卡记录 -->
				<timeline v-if="tabSelect=='change'">
					<timeline-item v-for="(item,index) in changeList" :leftTime="item.date" :color="color">
						<view class="package-item" @click="goToChangeDetail(item)">
							<view class="package-item-number">
								<text>{{item.receiveName}}</text>
								<text style="font-weight: 100;font-size: 24upx;">查看</text>
							</view>
							<view class="package-item-meal">{{item.address}}</view>
							<view class="package-item-meal">{{item.phoneNumber}}</view>
							<view class="package-item-status1">
								<text>{{item.dictStatus}}</text>
							</view>
							<img src="../../../static/img/dingdan.png" class="img-icon" />
						</view>
					</timeline-item>
				</timeline>
			</view>
			<view v-if="showNone" class="notimeline">
				<img src='../../../static/img/none.png' class="img-none" />
				<view class="text">暂无数据</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import timeline from '../../../components/chenbin-timeline/timeLine.vue'
	import timelineItem from '../../../components/chenbin-timeline/timelineItem.vue'
	export default {
		components: {
			timeline,
			timelineItem
		},
		data() {
			return {
				tabList: [{
						label: '套餐订单',
						value: 'package'
					},
					{
						label: '余额订单',
						value: 'balance'
					},
					{
						label: '换卡订单',
						value: 'change'
					},
				],
				tabSelect: 'package',
				showTimeLine: false,
				showNone: false,
				packageList: [], //套餐订单
				balanceList: [], //余额订单
				changeList: [], //换卡记录
				cardId: '', //单卡id
				page: {
					size: 10,
					current: 1
				},
				showLoadMore: false,
				showLoading: true,
				color: 'linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%)',
			}
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
				WeixinJSBridge.invoke('setFontSizeCallback', {
					'fontSize': 0
				});
				// 重写设置网页字体大小的事件
				WeixinJSBridge.on('menu:setfont', function() {
					WeixinJSBridge.invoke('setFontSizeCallback', {
						'fontSize': 0
					});
				});
			};
			this.cardId = option.cardId ? option.cardId : ''; //是否查单卡的订单信息  cardId若有值则查单卡订单信息
			
			// this.tabSelect = option.type ? option.type : 'package'; //订单类型 默认查询套餐订单
			// this.tabSelect = localStorage.getItem('tab')?localStorage.getItem('tab'):'package';//订单类型 默认查询套餐订单
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
				this.getList();
				this.getLogs();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.packageList = [];
			this.balanceList = [];
			this.changeList = [];
			this.initData();
			this.getList();
			this.getLogs();
			this.showLoading = true;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			let _this = this;
			this.showLoading = true;
			uni.getStorage({
				key: 'cardId',
				success: function(res) {
					_this.cardId = res.data
				}
			})
			uni.getStorage({
				key: 'cardNumber',
				success: function(res) {
					_this.cardNumber = res.data
				}
			})
			uni.getStorage({
				key: 'tab',
				success: function(res) {
					_this.tabSelect = res.data
				}
			})
			if (this.tabSelect == '') {
				this.tabSelect = 'package'
			}
			setTimeout(() => {
				this.initData();
				this.getList();
				this.getLogs();
			}, 300);
		},
		onBackPress() {
			uni.navigateBack({
				delta: 1
			});
		},
		onUnload() {
			this.page = {
				size: 10,
				current: 1
			}
			this.packageList = [];
			this.balanceList = [];
			this.changeList = [];
			this.showLoadMore = false;
			uni.setStorage({
				key: 'cardId',
				data: ''
			})
			uni.setStorage({
				key: 'cardNumber',
				data: ''
			})
		},
		onHide() {
			this.page = {
				size: 10,
				current: 1
			}
			this.packageList = [];
			this.balanceList = [];
			this.changeList = [];
			this.showLoadMore = false;
			uni.setStorage({
				key: 'cardId',
				data: ''
			})
			uni.setStorage({
				key: 'cardNumber',
				data: ''
			})
			uni.setStorage({
				key: 'tab',
				data: ''
			})
		},
		methods: {
			//切换头部导航
			changeTab(item) {
				this.tabSelect = item.value;
				if (item.value == 'package') {
					if (this.packageList.length > 0) {
						this.showTimeLine = true;
						this.showNone = false;
					} else {
						this.showNone = true;
						this.showTimeLine = false;
					}
				}
				if (item.value == 'balance') {
					if (this.balanceList.length > 0) {
						this.showTimeLine = true;
						this.showNone = false;
					} else {
						this.showNone = true;
						this.showTimeLine = false;
					}
				}
				
				if (item.value == 'change') {
					if (this.changeList.length > 0) {
						this.showTimeLine = true;
						this.showNone = false;
					} else {
						this.showNone = true;
						this.showTimeLine = false;
					}
				}
			},
			//获取订购套餐列表数据
			initData() {
				let _this = this;
				this.$req.userData('/customer-order/customerList', {
					page: this.page,
					cardId: this.cardId
				}).then(v => {
					if (this.page.current == 1) {
						this.packageList = []
					}
					if (v.data&&v.data.records) {
						v.data.records.forEach(obj => {
							let order = {}
							order.cardId = obj.cardId
							order.cardNumber = obj.cardNumber
							order.insertTimeDate = obj.insertTimeDate
							order.setMealName = obj.setMealName
							order.dictStatusName = obj.dictStatusName
							order.dictCardOperatorName = obj.dictCardOperatorName
							order.price = obj.price.toFixed(2)
							order.id = obj.id
							order.remark = obj.remark?obj.remark:'无'
							this.packageList.push(order)
						})
					}
					setTimeout(function() {
						_this.showLoading = false;
					}, 100)
					
					if (this.tabSelect == 'package') {
						if (this.packageList.length > 0) {
							this.showTimeLine = true;
							this.showNone = false;
						} else {
							this.showTimeLine = false;
							this.showNone = true;
						}
					}
				})
			},
			//获取余额套餐列表数据
			getList() {
				let _this = this
				this.$req.userRecharge('/card-balance-records/list', {
					page: this.page,
					cardId: this.cardId
				}).then(v => {
					if (this.page.current == 1) {
						this.balanceList = []
					}
					if (v.data&&v.data.records) {
						v.data.records.forEach(obj => {
							let order = {}
							order.cardId = obj.cardId
							order.cardNumber = obj.cardNumber
							order.date = obj.insertTimeDate
							order.setMealName = obj.setMealName
							if (obj.dictStatus == 'BALANCE_PAY') {
								order.payAmount = "余额购买套餐"
							} else {
								order.payAmount = "付款金额:" + obj.payAmount + "元"
							}
							order.price = obj.price.toFixed(2)
							order.nickName = obj.nickName
							order.id = obj.id
							order.dictTransactionMothodName = obj.dictTransactionMothodName
							order.dictOperatorName = obj.dictOperatorName
							this.balanceList.push(order)
						})
					}
					setTimeout(function() {
						_this.showLoading = false;
					}, 100)
					if (this.tabSelect == 'balance') {
						if (this.balanceList.length > 0) {
							this.showTimeLine = true;
							this.showNone = false;
						} else {
							this.balanceList = false;
							setTimeout(function() {
								_this.showNone = true;
							}, 1000)
						}
					}
				})
			},
			//获取换卡日志列表数据
			getLogs() {
				let _this = this;
				this.$req.crm('/expressinformation/listForCustomer', {
					page: this.page,
					cardId: this.cardId
				}).then(v => {
					if (this.page.current == 1) {
						this.changeList = []
					}
					if (v&&v.data!==undefined&&v.data.records) {
						v.data.records.forEach(obj => {
							let order = {}
							order.receiveName = obj.receiveName
							order.phoneNumber = obj.phoneNumber
							order.date = obj.insertTimeDate
							order.dictStatus = obj.dictStatusName
							order.address = obj.address
							order.id = obj.id
							this.changeList.push(order)
						})
					}
					setTimeout(function() {
						_this.showLoading = false;
					}, 100)
					if (this.tabSelect == 'change') {
						if (this.changeList.length > 0) {
							this.showTimeLine = true;
							this.showNone = false;
						} else {
							this.changeList = false;
							setTimeout(function() {
								_this.showNone = true;
							}, 1000)
						}
					}
				})
			},
			goToOrderDetail(item) {
				uni.navigateTo({
					url: `/pages/tabbar/order/orderDetail?cardId=${item.cardId}&cardNumber=${item.cardNumber}&orderId=${item.id}`
				})
			},
			goToChangeDetail(item) {
				uni.navigateTo({
					url: `/pages/tabbar/order/changeDetail?orderId=${item.id}`
				})
			},
			goToRecharge(item){
				uni.navigateTo({
					url: `/pages/tabbar/recharge/bookPackage?cardId=${item.cardId}&cardNumber=${item.cardNumber}&operatorName=${item.dictCardOperatorName}`
				})
			},
			goToBalanceRecharge(item){
				console.log(item)
				uni.navigateTo({
					url: `/pages/tabbar/recharge/newBalanceRecharge?cardId=${item.cardId}&cardNumber=${item.cardNumber}&operatorName=${item.dictOperatorName}`
				})
			},
			goToCardDetail(item){
				uni.navigateTo({
					url: `/pages/cardController/newIndex?cardId=${item.cardId}&cardNumber=${item.cardNumber}&operatorName=${item.dictCardOperatorName}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
	}

	.top {
		width: 100%;
		height: 100upx;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #FFFFFF;
		z-index: 10;
	}

	.tab {
		width: 140upx;
		height: 80%;
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-size: 30upx;
		border-bottom: 2px solid #FFFFFF;
	}

	.active {
		color: #2A7FFF;
		border-bottom: 2px solid #2A7FFF;
	}

	.split-line {
		width: 100%;
		height: 10upx;
		background-color: rgba(248, 248, 255, 1);
		position: fixed;
		top: 100upx;
		left: 0;
		z-index: 10;
	}

	.body {
		width: 100%;
		min-height: calc(100% - 110upx);
		position: absolute;
		top: 110upx;
		left: 0;
		overflow-y: scroll;
	}

	.timeBlock {
		position: relative;
		width: 90%;
		height: auto;
		top: 3%;
		left: 5%;
		padding-bottom: 100upx;
	}

	.notimeline {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.img-none {
		width: 50%;
		height: auto;
	}

	.text {
		width: auto;
		height: 50upx;
		font-size: 28upx;
		color: #999;
	}

	.package-item {
		width: 100%;
		height: auot;
		padding: 10upx;
		position: relative;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		color: #ffffff;
		border-radius: 3px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.package-item-number {
		width: 100%;
		height: 50upx;
		position: relative;
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.package-item-meal {
		width: 100%;
		height: auto;
		position: relative;
		font-size: 28upx;
		line-height: 36upx;
	}

	.package-item-status {
		width: 100%;
		height: 40upx;
		position: relative;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.package-item-status1 {
		width: 100%;
		height: 40upx;
		position: relative;
		font-size: 28upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.package-item-remark{
		width: 100%;
		height: auto;
		font-size: 24upx;
		color: #FFFFFF;
		line-height: 36upx;
		position: relative;
	}
	.img-icon {
		width: 60px;
		height: auto;
		position: absolute;
		right: 0;
		top: 40%;
		margin-right: -15px;
	}

	/* 以下是loading加载样式 */
	.loading {
		width: 150px;
		height: 15px;
		margin: 0 auto;
		position: relative;
		margin-top: 80%;
	}

	.loading span {
		position: absolute;
		width: 15px !important;
		height: 15px !important;
		border-radius: 50%;
		background: #408CFF;
		-webkit-animation: load 1.04s ease-in infinite alternate;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
			-webkit-transform: translate(0px);
		}

		100% {
			opacity: 0.2;
			-webkit-transform: translate(150px);
		}
	}

	.loading span:nth-child(1) {
		-webkit-animation-delay: 0.13s;
	}

	.loading span:nth-child(2) {
		-webkit-animation-delay: 0.26s;
	}

	.loading span:nth-child(3) {
		-webkit-animation-delay: 0.39s;
	}

	.loading span:nth-child(4) {
		-webkit-animation-delay: 0.52s;
	}

	.loading span:nth-child(5) {
		-webkit-animation-delay: 0.65s;
	}
	.loading span:nth-child(6) {
		-webkit-animation-delay: 0.65s;
	}
	.loading span:nth-child(7) {
		-webkit-animation-delay: 0.65s;
	}
</style>
